<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // ES6中的Class继承
        // ES6 Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

        //1. 使用ES5的构造函数加原型链来实现对象的继承
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.info = function(){
            return `大家好！我叫${this.name},今年${this.age}岁！`;
        }

        function Stu(name,age,classid){
            // 通过call来调用Person函数，实现name和age属性初始化
            Person.call(this, name, age);
            this.classid = classid;
        }
        // 通过原型链实现继承
        Stu.prototype = new Person();
        Stu.prototype.constructor = Stu;
        // 为Stu的原型对象定义方法
        Stu.prototype.study = function(){
            return `${this.name} 正在${this.classid}中学习...`;
        }

        // 实例化
        const s = new Stu("张三",20, "web0907班");
        console.log(s);
        console.log(s.info());
        console.log(s.study());
        console.log(s.__proto__.__proto__.__proto__.__proto__);

        //2. 采用ES6的Class类来实现继承关系（通过extends关键字实现继承）
        //声明一个名为Person2的类
        class Person2 {
            // 在类中定义一个构造方法，名字必须为constructor，会在new 类时自动调用
            constructor(name,age) {
                this.name = name;
                this.age = age;
            }
            // 定义普通方法
            info() {
                return `大家好！我叫${this.name},今年${this.age}岁！`;
            }
        }

        // 定义一个子类Stu2 去继承Person2
        class Stu2 extends Person2 {
            // 构造方法
            constructor(name,age,classid){
                super(name, age); // 调用父类的constructor(name, age)
                this.classid = classid;
            }
            // 普通方法
            study(){
                return `${this.name} 正在${this.classid}中学习...`;
            }
        }

        // 使用（实例化）, new Stu2类实例化一个对象，会自动调用类中的构造方法
        const s2 = new Stu2("李四",22, "web0907班");
        console.log(s2);
        console.log(s2.info()); // 调用方法
        console.log(s2.study()); // 调用方法
        console.log(s2.__proto__.__proto__.__proto__.__proto__);


        
    </script>
</body>
</html>